<template>
	<div>

		<el-row>
			<div align="left">
				<el-button type="primary" @click="query">添加商品分类</el-button>
			</div>

			<el-dialog title="添加商品分类" :visible.sync="dialogFormVisible">
				<el-form :model="form">
					<el-form-item label="商品分类名:">
						<el-input v-model="form.shoptypename" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>


				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addto">确 定</el-button>
				</div>
			</el-dialog>
			<!-- 修改商品分类模态框· -->
			<el-dialog title="修改商品分类" :visible.sync="dialogFormVisibleq">
				<el-form :model="form1">
					<el-form-item label="商品分类名:">
						<el-input v-model="form1.shoptypename" autocomplete="off"></el-input>
					</el-form-item>
				</el-form>

				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisibleq = false">取 消</el-button>
					<el-button type="primary" @click="updatas();open1()">确 定</el-button>
				</div>
			</el-dialog>



			<!-- 商品展示 -->
			<el-table :data="shoptypedata" style="width: 100%; font-size: 20px; " max-height="500">
				//为了美化 空出一行

				</el-table-column>
				<el-table-column prop="" label="" width="200">
				</el-table-column>


				<el-table-column prop="shoptypeid" label="编号" width="500">

				</el-table-column>
				<el-table-column prop="shoptypename" label="商品分类名" width="500">
				</el-table-column>

				<el-table-column fixed="right" label="操作" width="500">
					
					
					<template slot-scope="scope">
						
									  <el-button type="primary" icon="el-icon-edit" circle @click="queryq(scope.row.shoptypeid)" >  </el-button>
						<!-- <el-button type="primary" icon="el-icon-edit" circle @click="queryq(scope.row.shoptypeid)" @click="queryq(scope.row.shoptypeid)"></el-button> -->
						<!-- //修改 -->
						<el-button type="danger" icon="el-icon-delete" slot="reference" circle :plain="true" plain @click="open4();delet(scope.row.shoptypeid)">
						</el-button> <!-- //删除 -->
					</template>
					
					
				</el-table-column>
			</el-table>
		</el-row>



	</div>
</template>

<script>
	var _this;
	export default {
		created() {
			_this = this //记录this--【当前组件对象】
			_this.shoptypeshow()
		},
		data() {
			return {
				visible: false,
				dialogTableVisible: false,
				dialogFormVisible: false,
				dialogTableVisibleq: false,
				dialogFormVisibleq: false,
				form: {
					shoptypename: '',
					delivery: false,
					type: []
				},
				form1: {
					shoptypename: '',
					delivery: false,
					type: []
				},
				shoptypedata: [],
				zhi: ""

			};
		},
		methods: {
			delet(shoptypeid) {
				_this.$axios.post(
						"/shoptype/delete", {
							'shoptypeid': shoptypeid
						}
					)
					.then(function(param) {
						console.log(param)
						_this.shoptypeshow();
					})
					.catch(function(err) {
						console.log(err)
					})

			},
			addto() {
				_this.dialogFormVisible = false,
					_this.$axios.post(
						"/shoptype/add", {
							"shoptypename": _this.form.shoptypename
						}
					)
					.then(function(param) {
						console.log(param)
						_this.shoptypeshow()
					})
					.catch(function(err) {
						console.log(err)
					})

			},
			updatas() {
				_this.dialogFormVisibleq = false,

					_this.$axios.post(
						"/shoptype/updata", {
							"shoptypeid": _this.zhi,
							"shoptypename": _this.form1.shoptypename,
						}
					)
					.then(function(param) {
						console.log("修改：")
						console.log(param)
						_this.shoptypeshow()
					})
					.catch(function(err) {
						console.log(err)
					})

			},
			shoptypeshow() {
				_this.$axios.post(
						"/shoptype/show")
					.then(function(param) {
						console.log("shuju")
						console.log(param)
						_this.shoptypedata = param.data

					})
					.catch(function(err) {
						console.log(err)
					})

			},
			query() {
				_this.dialogFormVisible = true,
					_this.$axios.post(
						"/shop/list")
					.then(function(param) {
						console.log("shoptype的")
						console.log(param)
						_this.shopdata = param.data.shops
						_this.shoptypedata = param.data.shoptypes
					})
					.catch(function(err) {
						console.log(err)
					})
			},
			queryq(shopid) {
				_this.zhi = shopid,

					_this.dialogFormVisibleq = true,
					_this.$axios.post(
						"/shop/list")
					.then(function(param) {
						console.log("shoptype的")
						console.log(param)
						_this.shopdata = param.data.shops
						_this.shoptypedata = param.data.shoptypes
					})
					.catch(function(err) {
						console.log(err)
					})
			},
			open1() {
				this.$notify({
					title: '修改成功提示！',
					message: '您已成功修改数据',
					type: 'success'
				});
			},
			open4() {
				this.$notify.error({
					title: '删除警告！',
					message: '您已删除该数据！'
				});
			}
		}
	}
</script>

<style>
</style>
